<template>
	<view>
		<!-- 分类 折叠面板-->
		<view class="titleContent">
			<view class="uni-flex">
				<view v-for="(item, index) in titleTypeList" :key="index"
				:class="current === index?'active':''"
				@click="category(index)">
					{{item.name}}
				<image :src="current === index?'../../static/image/arrowsTop.png':'../../static/image/arrowsBottom.png'" mode="aspectFill" lazy-load></image>
				</view>
			</view>
		</view>
		
		<!-- 展示模块 -->
		<view class="content" v-if="current != -1" :style="current != -1?'height: 500upx;':''">
			<!-- 地区信息 -->
			<view :style="current != -1?'height: 500upx;':''">
				<view class="selectModelBox" v-show="current === 0">
					<view class="provinceBox" v-show="proviceShow">
						<view :class="activeProvince === item.code?'active':''" 
						v-for="(item,index) in provinceData" :key="item.code"
						@click="provinceEvent(item,index)" >
							{{item.name}}
						</view>
					</view>
					<view class="cityBox" v-show="cityShow">
						<view :class="activeCity === item.code?'active':''" 
						@click="cityEvent(item,index)" 
						v-for="(item,index) in cityData" :key="item.code">
							{{item.name}}
						</view>
					</view>
					<view class="areaBox" v-show="countyShow">
						<view :class="activeCounty === item.code?'active':''" 
						@click="countyEvent(item,index)" 
						v-for="(item,index) in countyData" :key="item.code">
							{{item.name}}
						</view>
					</view>
				</view>
				
				<!-- 土地类型 -->
				<view class="selectLandType" v-show="current === 1">
					<view :class="activeOther === index?'active':''" 
					@click="landTypeEvent(typeItem,index)" 
					v-for="(typeItem, index) in landType" :key="index">{{typeItem.type}}</view>
				</view>
				
				<!-- 土地面积 -->
				<view class="selectLandArea" v-show="current === 2">
					<view :class="activeOther === index?'active':''" 
					@click="landAreaEvent(areaItem,index)" 
					v-for="(areaItem, index) in selectAreaList" :key="index">{{areaItem.areaScope}}</view>
				</view>
				
				<!-- 土地价格 -->
				<view class="selectLandPrice" v-show="current === 3">
					<view :class="activeOther === index?'active':''" 
					@click="landPriceEvent(priceItem,index)" 
					v-for="(priceItem, index) in selectPriceList" :key="index">{{priceItem.priceScope}}</view>
				</view>
			</view>
		</view>
		
		<!-- 占位区 -->
		<view class="placeholder" v-if="current != -1" 
		:style="{height:useHeight+'px'}"
		@click.stop="changeStateBar" @touchmove.stop="changeStateBar"></view>
		
		<!-- 土地信息 -->
		<template v-if="landInfoList.length > 0">
			<landInfo v-for="(items, index) in landInfoList" :key="index" :landInfo="items"></landInfo>
			<!-- 上拉加载 -->
			<loadMore :loadtext="loadtext"></loadMore>
		</template>
		<template v-else>
			<no-land></no-land>
			<!-- 推荐土地 -->
			<recommendLand :recommendland="RecommendLandInfo"></recommendLand>
		</template>
	</view>
</template>

<script>
	import cityDatas from '../../common/city.area.js'
	import landInfo from "../../components/landInfo/landInfo.vue"
	import recommendLand from "../../components/recommendLand/recommendLand.vue"
	import noLand from '../../components/common/no-land.vue'
	import loadMore from "../../components/common/load-more.vue"
	export default {
		components: {
			landInfo,
			recommendLand,
			noLand,
			loadMore
		},
		data() {
			return {
				RecommendLandInfo: [],	// 推荐土地
				landInfoList: [],	// 土地信息列表
				inputText:"", //输入框内容
				page: 1,	// 页码
				size: 6,	// 数量
				loadtext:"上拉加载更多",
				useHeight: 600, // 可用屏幕高度
				titleTypeList:[
					{name:"地区"},
					{name:"类型"},
					{name:"面积"},
					{name:"价格"}
				],
				
				activeProvince:-1,	// 设置点击效果
				activeCity:-1,
				activeCounty:-1,
				activeOther:-1,
				current: -1,		// 土地类型显示
				
				provinceData: [],   //省份信息
				cityData: [],	//城市信息
				countyData: [],	//县/区信息
				proviceShow: false,		// 是否显示省份
				cityShow: false,		// 是否显示城市
				countyShow: false,		// 是否显示县/区
				
				inputText: "",	// 搜索框输入的信息
				province: "",	//省份信息
				city: "",		//城市信息
				county: "",		//县/区信息
				landType:[		// 土地类型
					{type:"耕地"},
					{type:"林地"},
					{type:"园地"},
					{type:"草地"},
					{type:"养殖用地"},
					{type:"工矿仓储"},
					{type:"商业住宅"},
					{type:"农房"},
					{type:"其他用地"},
				],   
				selectAreaList:[
					{areaScope:"10亩以下", area:10},	// 土地面积
					{areaScope:"10亩~100亩", area:100},
					{areaScope:"101亩~500亩", area:500},
					{areaScope:"501亩~1000亩", area:1000},
					{areaScope:"1001亩~5000亩", area:5000},
					{areaScope:"5000亩以上", area:5001},
				],
				selectPriceList:[
					{priceScope:"10万-100万", price:100},	// 土地价格
					{priceScope:"101万-300万", price:300},
					{priceScope:"301万-500万", price:500},
					{priceScope:"501万-1000万", price:1000},
					{priceScope:"1001万-3000万", price:3000},
					{priceScope:"3001万-5000万", price:5000},
					{priceScope:"5001万-1亿", price:10000},
					{priceScope:"1亿以上", price:10001},
				],
			}
		},
		
		onLoad() {
			// 获取城市js文件信息
			this.provinceData = cityDatas;
			
			uni.getSystemInfo({
				success: (res)=> {
					let height=res.windowHeight-uni.upx2px(100);
					this.useHeight = height;
				}
			});
		},
		
		onReady(){
			// 获取土地信息
			//this.getLandInfo();
			// 获取推荐土地信息
			this.getRecommendLandInfo();
		},
		
		// 监听下拉刷新事件
		onPullDownRefresh() {
			this.getLandData();
		},
		
		// 监听上拉触底事件
		onReachBottom(){
			//this.loadMore();
		},
		
		//导航栏控件
		onNavigationBarButtonTap(e) {
			if(e.float==='left'){
				//console.log()
				// var webView = this.$mp.page.$getAppWebview();
				// webView.setTitleNViewSearchInputText('');
			} else {
				this.getLandSearchData();
			}
		},
		
		// 监听搜索框文本变化
		onNavigationBarSearchInputChanged(e) {
			this.inputText = e.text
		},
		//监听点击搜索按钮事件
		onNavigationBarSearchInputConfirmed(e) {
			if(e.text){
				this.getLandSearchData();
			}
		},
		
		methods: {
			
			// 点击隐藏选择栏
			changeStateBar(){
				
				this.initializeClassify();
			},
				
			// 获取搜索土地信息
			async getLandSearchData(){
				if(!this.inputText){
					return;
				}
				//id, price, area, introduce, type, license, province, city, county, address, circulation
				var reg=/^[0-9]*$/;
				if(reg.test(this.inputText)){
					const res = await this.$http({
						url:'/app/landInfo/fuzzySearchPaging',
						data: {
							id: this.inputText,
							area: this.inputText,
							price: this.inputText,
							page: this.page,
							size: this.size,
						},
					})
					console.log(res);
					this.landInfoList = res.data.data.list;
				} else {
					const res = await this.$http({
						url:'/app/landInfo/fuzzySearchPaging',
						data: {
							type: this.inputText,
							province: this.inputText,
							city: this.inputText,
							county: this.inputText,
							circulation: this.inputText,
							page: this.page,
							size: this.size,
						},
					})
					// console.log(res);
					this.landInfoList = res.data.data.list;
				}
			},
		
		
			// 下拉刷新事件
			getLandData(){
				setTimeout(()=> {
					// 获取数据
					if(this.inputText != null && this.inputText != ""){
						this.getLandSearchData();
					} else {
						this.getLandInfo();
					}
					// 关闭下拉刷新
					uni.stopPullDownRefresh();
				}, 2000);
				
			},
			
			// 上拉加载更多
			loadMore(){
			    if(this.loadtext != "上拉加载更多"){ return;}
			    this.loadtext = "加载中...";	
			    this.page++;
			    setTimeout(() => {
					uni.request({
						url: this.confige.webUrl + "/app/landInfo/issueInfoPaging",
						data:{
							page: this.page,
							size: this.size,
						},
						header:{},
						success: (res) => {
							// console.log(res);
							if(res.data.code === 206 || res.data.data.pages < this.page){
								this.loadtext = "没有更多数据啦";
								return;
							}
							else if(res.data.code === 200){
								let loadMoreList = res.data.data.list;
								this.landInfoList.push(...loadMoreList);
								this.loadtext = "上拉加载更多";
							} else {
								this.loadtext = "没有更多数据啦";
							}
						}	
					})
				}, 1000);
				// 清空输入框的值
				this.inputText = "";
			},
		
			// 获取土地信息
			async getLandInfo(){
				const res = await this.$http({
						url: "/app/landInfo/issueInfoPaging",
						data: {
							page: this.page,
							size: this.size,
						},
					})
				// this.landInfoList = res.data.data.list;
				//console.log(this.landInfo);
			},
			
			// 初始化点击数据
			initializeClassify(){
				this.activeOther = -1;
				this.activeProvince = -1;
				this.activeCity = -1;
				this.activeCounty = -1;
				this.current = -1;
				this.proviceShow = false;
				this.cityShow = false;
				this.countyShow = false;
			},
			
			// 类型选择点击事件
			category(index) {
				// 初始化
				if(this.current === index){
					this.initializeClassify();
					return;
				}
				this.initializeClassify();
				if(index === 0){
					this.proviceShow = !this.proviceShow;
				}
				this.current = index;
				
				if(this.provinceData[0].name != "不限"){
					let provincelist = [{
						code:"0001",
						name:"不限"
					}];
					this.provinceData.unshift(...provincelist);
				}
			},
			
			// 省份选择点击事件
			async provinceEvent(data, index){
				//console.log(data.name);
				if(data.name === "不限"){
					this.initializeClassify();
					const res = await this.$http({
						url: "/app/landInfo/issueInfoPaging",
						data:{
							page: this.page,
							size: this.size,
						}
					})
					this.landInfoList = res.data.data.list;
					return;
				}
				
				this.cityShow = true;
				this.countyShow = false;
				this.province = data.name;
				this.cityData = data.cityList;
				this.activeProvince = data.code;
				
				if(this.cityData[0].name != "不限"){
					let citylist = [{
						code:"0002",
						name:"不限"
					}];
					this.cityData.unshift(...citylist);
				}
				
			},
			
			// 城市选择点击事件
			cityEvent(data, index){
				if(data.name === "不限"){
					this.initializeClassify();
					console.log("========"+this.province)
					uni.request({
						//url: this.confige.webUrl + "/app/landInfo/issueInfoPaging",
						url:'http://localhost:8084/app/landInfo/issueInfoPaging',
						data:{
							province: this.province,
							page: this.page,
							size: this.size,
						},
						header:{},
						success: (res) => {
							console.log(res);
							this.landInfoList = res.data.data.list;
							
						}	
					})	
					
					// const res = await this.$http({
					// 	url: "/app/landInfo/issueInfoPaging",
					// 	data: {
					// 		province: this.province,
					// 		page: this.page,
					// 		size: this.size,
					// 	},
					// })
					// console.log("========"+res)
					// this.landInfoList = res.data.data.list;
					//this.landInfoList = "";
					
					return;
				}
				this.city = data.name;
				this.countyShow = true;
				this.countyData = data.areaList;
				this.activeCity = data.code;
				
				if(this.countyData[0].name != "不限"){
					let citylist = [{
						code:"0003",
						name:"不限"
					}];
					this.countyData.unshift(...citylist);
				}
			},
			
			// 县/区选择点击事件
			async countyEvent(data, index){
				if(data.name === "不限"){
					this.initializeClassify();
					const res = await this.$http({
						url: "/app/landInfo/issueInfoPaging",
						data: {
							province: this.province,
							city: this.city,
							page: this.page,
							size: this.size,
						},
					})
					this.landInfoList = res.data.data.list;
					return;
				}
				this.county = data.name;
				this.activeCounty = data.code;
				this.initializeClassify();
				const res = await this.$http({
					url: "/app/landInfo/issueInfoPaging",
					data: {
						province: this.province,
						city: this.city,
						county: this.county,
						page: this.page,
						size: this.size,
					},
				})
				this.landInfoList = res.data.data.list;
			},
			
			// 土地类型选择点击事件
			async landTypeEvent(data, index){
				this.activeOther = index;
				this.initializeClassify();
				const res = await this.$http({
					url: "/app/landInfo/issueInfoPaging",
					data: {
						type: data.type,
						page: this.page,
						size: this.size,
					},
				})
				this.landInfoList = res.data.data.list;
			},
			
			// 土地面积选择点击事件
			async landAreaEvent(data, index){
				this.activeOther = index;
				this.initializeClassify();
				const res = await this.$http({
					url: "/app/landInfo/issueInfoPaging",
					data: {
						area: data.area,
						page: this.page,
						size: this.size,
					},
				})
				console.log(res);
				this.landInfoList = res.data.data.list;
			},
			
			// 土地价格选择点击事件
			async landPriceEvent(data, index){
				this.activeOther = index;
				this.initializeClassify();
				const res = await this.$http({
					url: "/app/landInfo/issueInfoPaging",
					data: {
						price: data.price,
						page: this.page,
						size: this.size,
					},
				})
				console.log(res);
				this.landInfoList = res.data.data.list;
			},
			
			// 获取推荐土地信息
			async getRecommendLandInfo(){
				const res=await this.$http({
					url: "/app/landInfo/issueInfoPaging",
					data: {
						city: this.cityName,
						page: this.page,
						size: this.size,
						land_popularity: 2,
					},
				})
				// console.log(res);
				this.RecommendLandInfo = res.data.data.list.slice(0,3);
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../common/global.less";

	.titleContent{
		//margin: @uni-spacing-col-base @uni-spacing-row-sm auto;
		height: 60upx;
		>view{
			height: 60upx;
			position: fixed;
			width: 100%;
			z-index: 100;
			background: #EEEEEE;
			border: 1upx solid #EEEEEE;
			>view{
				width: 25%;
				text-align: center;
				image{
					margin-left: @uni-spacing-row-sm;
					width: 25upx;
					height: 25upx;
				}
			}
		}
	}
	
	.active{
		color: @uni-color-primary;
	}
	
	.content{
		width: 100%;
		>view{
			position: fixed;
			width: 100%;
			z-index: 100;
			background: #FFFFFF;
			border: 1upx solid #EEEEEE;
			>view{
				margin: @uni-spacing-col-base @uni-spacing-row-sm auto; 
			}
			.selectModelBox{
				display: flex;
				.provinceBox{
					padding-left: 20rpx;
					height: 460upx;
					width: 100%;
					overflow: auto;
					>view{
						// border-bottom: 1upx solid @uni-border-color;
						// border-right: 1upx solid @uni-border-color;
					}
				}
				.cityBox{
					padding-left: 20rpx;
					height: 460upx;
					width: 100%;
					overflow: auto;
					
				}
				.areaBox{
					padding-left: 20rpx;
					height: 460upx;
					width: 100%;
					overflow: auto;
				}
			}
			.selectLandType{
				padding-left: 40rpx;
			}
			.selectLandArea{
				padding-left: 40rpx;
			}
			.selectLandPrice{
				padding-left: 40rpx;
			}
		}
	}
	
	.placeholder{
		width: 100%;
		position: fixed;
		z-index: 100;
		opacity: 0.5;
		background-color: #CCC;
	}
	
</style>
